<template>
    <div class="app-container" style="padding: 10px">

        <el-row>
            <el-col>
                <div style="background: #fff; margin-bottom: 20px;">
                    <user-check-year-total-chart :parentSwitchYear="switchYear" :yearData="yearTotal"></user-check-year-total-chart>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col style="background: #fff;" >
                <div class="filter-container margin-top-20">
                    <el-form :model="listQuery" :inline="true" ref="filterForm" style="display: inline-block">

                        <el-date-picker
                                prop="year"
                                class="filter-item"
                                v-model="listQuery.year"
                                align="right"
                                type="year"
                                placeholder="选择年份"
                                style="width: 180px;">
                        </el-date-picker>

                        <el-form-item prop="realName" class="filter-item">
                            <el-input v-model="listQuery.realName" placeholder="姓名" style="width: 200px;"></el-input>
                        </el-form-item>

                        <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
                        <el-button class="filter-item" type="primary" icon="mars-reset" @click="handleResetFilter">重置</el-button>

                    </el-form>
                </div>

                <el-table
                        :data="list"
                        v-loading="listLoading"
                        show-summary
                        :summary-method="getSummaries"
                        element-loading-text="给我一点时间"
                        border fit highlight-current-row
                        style="width: 100%">

                    <el-table-column type="index" width="70" align="center"> </el-table-column>

                    <el-table-column label="用户姓名" align="center">
                        <template slot-scope="scope"> {{scope.row.realName}} </template>
                    </el-table-column>

                    <el-table-column label="年份" align="center">
                        <template slot-scope="scope"> {{scope.row.year}} </template>
                    </el-table-column>

                    <el-table-column label="1月份" prop="m1" align="center">
                        <template slot-scope="scope"> {{scope.row.m1}} </template>
                    </el-table-column>
                    <el-table-column label="2月份" prop="m2" align="center">
                        <template slot-scope="scope"> {{scope.row.m2}} </template>
                    </el-table-column>
                    <el-table-column label="3月份" prop="m3" align="center">
                        <template slot-scope="scope"> {{scope.row.m3}} </template>
                    </el-table-column>
                    <el-table-column label="4月份" prop="m4" align="center">
                        <template slot-scope="scope"> {{scope.row.m4}} </template>
                    </el-table-column>
                    <el-table-column label="5月份" prop="m5" align="center">
                        <template slot-scope="scope"> {{scope.row.m5}} </template>
                    </el-table-column>
                    <el-table-column label="6月份" prop="m6" align="center">
                        <template slot-scope="scope"> {{scope.row.m6}} </template>
                    </el-table-column>
                    <el-table-column label="7月份" prop="m7" align="center">
                        <template slot-scope="scope"> {{scope.row.m7}} </template>
                    </el-table-column>
                    <el-table-column label="8月份" prop="m8" align="center">
                        <template slot-scope="scope"> {{scope.row.m8}} </template>
                    </el-table-column>
                    <el-table-column label="9月份" prop="m9" align="center">
                        <template slot-scope="scope"> {{scope.row.m9}} </template>
                    </el-table-column>
                    <el-table-column label="10月份" prop="m10" align="center">
                        <template slot-scope="scope"> {{scope.row.m10}} </template>
                    </el-table-column>
                    <el-table-column label="11月份" prop="m11" align="center">
                        <template slot-scope="scope"> {{scope.row.m11}} </template>
                    </el-table-column>
                    <el-table-column label="12月份" prop="m12" align="center">
                        <template slot-scope="scope"> {{scope.row.m12}} </template>
                    </el-table-column>

                </el-table>

            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {parseTime} from "../../../utils";
    import { reportUserMonthCheck } from '@/api/tukuan/state'
    import UserCheckYearTotalChart from './charts/UserCheckYearTotalChart'

    export default {
        name: 'app',
        components: {
            UserCheckYearTotalChart
        },
        data() {
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    year: undefined,
                    realName: undefined
                },
                switchYear: undefined,
                yearTotal: {
                    m1: 0, m2: 0, m3: 0, m4: 0, m5: 0, m6: 0,
                    m7: 0, m8: 0, m9: 0, m10: 0, m11: 0, m12: 0
                }

            }
        },
        created() {
            this.getList()
            this.listQuery.year = parseTime(new Date(), '{y}')
            this.switchYear = this.listQuery.year
        },
        filters: {
        },
        methods: {
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 2) {
                        sums[index] = '每月数量';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index];
                    } else {
                        sums[index] = '-';
                    }

                });

                return sums;
            },

            getList() {
                this.listLoading = true
                //年份
                this.listQuery.year = parseTime(this.listQuery.year, '{y}')
                this.switchYear = this.listQuery.year

                reportUserMonthCheck(this.listQuery).then(response => {
                    const items = response.data
                    this.list = items.map(item => {
                        this.yearTotal.m1 += isNaN(item.m1)?0:item.m1
                        this.yearTotal.m2 += isNaN(item.m2)?0:item.m2
                        this.yearTotal.m3 += isNaN(item.m3)?0:item.m3
                        this.yearTotal.m4 += isNaN(item.m4)?0:item.m4
                        this.yearTotal.m5 += isNaN(item.m5)?0:item.m5
                        this.yearTotal.m6 += isNaN(item.m6)?0:item.m6
                        this.yearTotal.m7 += isNaN(item.m7)?0:item.m7
                        this.yearTotal.m8 += isNaN(item.m8)?0:item.m8
                        this.yearTotal.m9 += isNaN(item.m9)?0:item.m9
                        this.yearTotal.m10 += isNaN(item.m10)?0:item.m10
                        this.yearTotal.m11 += isNaN(item.m11)?0:item.m11
                        this.yearTotal.m12 += isNaN(item.m12)?0:item.m12

                        return item
                    })
                    if(items.length == 0) {
                        const notData = {
                            m1: 0, m2: 0, m3: 0, m4: 0, m5: 0, m6: 0,
                                m7: 0, m8: 0, m9: 0, m10: 0, m11: 0, m12: 0
                        }
                        this.yearTotal = Object.assign({}, notData)
                    }

                    this.listLoading = false
                }).catch((error)=>{
                    console.log(error)
                    this.listLoading = false
                })
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            handleResetFilter() {
                this.$refs.filterForm.resetFields()
                this.listQuery.year = parseTime(new Date(), '{y}')
                this.getList()
            },
            resetForm() {
                this.$refs['form'].resetFields()
                this.form = {
                    year: parseTime(new Date(), '{y}'),
                    realName: undefined
                }
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>